<%-- 
    Document   : template
    Created on : Aug 18, 2014, 5:50:08 AM
    Author     : HT
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Account Settings</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="resources/user/css/bootstrap.min.css"
	rel="stylesheet">
<link type="text/css"
	href="resources/user/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="resources/user/css/theme.css"
	rel="stylesheet">
<link type="text/css" href="resources/user/css/font-awesome.css"
	rel="stylesheet">
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<%-- 
    Java Script
    --%>
<script src="resources/user/js/jquery-1.9.1.min.js"></script>
<script src="resources/user/js/jquery-ui-1.10.1.custom.min.js"></script>
<script src="resources/user/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<%@include file="head-banner.jsp"%>
		<!-- /navbar-inner -->
	</div>
	<!-- /navbar -->
	<div class="wrapper">
		<div class="container">
			<div class="row">
				<%@include file="left-banner.jsp"%>
				<!--/.span3-->
				<div class="span9">
					<div class="content" style="width: 100%; margin-left: 10px">
						<div class="module">
							<div class="">
								<div class="">
									<div class="module-head">
										<h3>General Account Settings</h3>
									</div>
									<c:if test="${UpdateMessage != null}">
									<div class="alert alert-danger" id="messagePanel"
										style="margin-left: 15px; margin-right: 15px; margin-top: 15px;">${UpdateMessage}</div>
									</c:if>
									<div class="module-body table">
										<table class="table table-striped table-hover">
											<tbody>
												<tr>
													<td
														style="text-align: left; font-weight: bold; color: black; width: 10%">Username</td>
													<td
														style="text-align: left; font-style: italic; width: 80%">${user}</td>
													<td
														style="text-align: right; font-weight: bold; color: black; width: 10%"></td>
												</tr>
												<tr>
													<td
														style="text-align: left; font-weight: bold; color: black; width: 10%">Password</td>
													<td
														style="text-align: left; font-style: italic; width: 80%">
															Click here to change your password
														<form action="userChangePassword.html" method="post" style="font-style: normal">
															<div id="panelPassword"
																style="text-align: left; display: none; margin-top: 10px;">
																<div class="" style="width: 220px;">
																	<label for="">Current Password: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="password" name="CurrentPassword" id="inputEmail"
																			placeholder="Current Password">
																	</div>
																</div>
																<div class="" style="width: 220px;">
																	<label for="">New Password: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="password" id="inputEmail"
																			name="newpassword" placeholder="New Password">
																	</div>
																</div>
																<div class="" style="width: 220px;">
																	<label for="">Confirm New Password: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="password" id="inputEmail"
																			name="confirmNewPassword" placeholder="Confirm New Password">
																	</div>
																</div>
																<div class="" style="margin-top: 10px;">
																	<div class="controls clearfix">
																		<button type="submit"
																			class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Save</button>
																		<button type="reset" class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Clear</button>
																	</div>
																</div>
															</div>
														</form>
													</td>
													<td style="text-align: right; width: 10%"><a
														id="editPassword">Edit</a></td>
												</tr>
												<tr>
													<td
														style="text-align: left; font-weight: bold; color: black; width: 10%">Profile</td>
													<td
														style="text-align: left; font-style: italic; width: 80%">Profile
														last updated over two months ago
														<form action="requestupdateprofile.html" method="post"
															style="font-style: normal">
															<input type="hidden" name="username" value="${user}">
															<div id="panelProject"
																style="display: none; margin-top: 10px;">
																<div class="" style="width: 220px;">
																	<label for="">ID Card Number: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id=""
																			placeholder="ID Card Number" readonly="true"
																			value="${currentAccount.accountIDCardNumber}">
																	</div>
																</div>
																<div style="display: block">
																	<div class="" style="width: 220px; float: left;">
																		<label for="">First Name: </label>
																		<div class="controls row-fluid">
																			<input class="span12" type="text" id=""
																				placeholder="First Name" readonly="true"
																				value="${currentAccount.accountFirstName}">
																		</div>
																	</div>
																	<div class=""
																		style="width: 220px; float: left; margin-left: 40px;">
																		<label for="">Middle Name: </label>
																		<div class="controls row-fluid">
																			<input class="span12" type="text" id=""
																				placeholder="Middle Name" readonly="true"
																				value="${currentAccount.accountMidName}">
																		</div>
																	</div>
																	<div class=""
																		style="width: 220px; float: left; margin-left: 40px;">
																		<label for="">Last Name: </label>
																		<div class="controls row-fluid">
																			<input class="span12" type="text" id=""
																				placeholder="Last Name" readonly="true"
																				value="${currentAccount.accountLastName}">
																		</div>
																	</div>
																</div>
																<div style="display: block; margin-top: 70px;">
																	<div class="" style="width: 220px; float: left">
																		<label for="">Phone: </label>
																		<div class="controls row-fluid">
																			<input class="span12" type="text" id=""
																				placeholder="Phone 1" readonly="true"
																				value="${currentAccount.accountPhone1}"> <input
																				class="span12" type="text" id=""
																				placeholder="Phone 2" readonly="true"
																				value="${currentAccount.accountPhone2}">
																		</div>
																	</div>
																</div>
																<div class="" style="width: 220px;">
																	<label for="">Address: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id=""
																			placeholder="Address 1" readonly="true"
																			value="${currentAccount.accountAddress1}"> <input
																			class="span12" type="text" id=""
																			placeholder="Address 2" readonly="true"
																			value="${currentAccount.accountAddress2}">
																	</div>
																</div>
																<div class="" style="width: 220px;">
																	<label for="">Email: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="email" id=""
																			placeholder="Email 1" readonly="true"
																			value="${currentAccount.accountEmail1}"> <input
																			class="span12" type="email" id=""
																			placeholder="Email 2" readonly="true"
																			value="${currentAccount.accountEmail2}"> <input
																			class="span12" type="hidden" id="txtCurentDate"
																			placeholder="Email 2" readonly="true"
																			name="txtCurentDate" value="">
																	</div>
																</div>
															</div>
														</form>
													</td>
													<td style="text-align: right; width: 10%"><a
														id="editProfile">Edit</a></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--/.content-->
				</div>
				<!--/.span9-->
			</div>
		</div>
		<!--/.container-->
	</div>

	<!--/.wrapper-->
	<div class="footer">
		<%@include file="footer.jsp"%>
	</div>
</body>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
	/* window.onload = function() {
		 var currentDay = new Date();

		var year = currentDay.getFullYear();
		var month = currentDay.getMonth() + 1;
		var day = currentDay.getDate();

		document.getElementById('txtCurentDate').value = day + "/" + month
				+ "/" + year;
	};*/ 

	$(document).ready(function() {
		/* $("#chkTimeOut").click(function() {
			var checkbox = document.getElementById("chkTimeOut");
			if (checkbox.checked == true) {
				document.getElementById("txtTimeOut").value = "30";
			} else {
				document.getElementById("txtTimeOut").value = "0";
			}
		}); */

		$("#editProfile").click(function() {
			var value = document.getElementById("editProfile").innerHTML;
			if (value == "Edit") {
				$("#panelProject").slideDown("slow");
				document.getElementById("editProfile").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelProject").slideUp("slow");
				document.getElementById("editProfile").innerHTML = "Edit";
			}
		});

		$("#editPassword").click(function() {
			var value = document.getElementById("editPassword").innerHTML;
			if (value == "Edit") {
				$("#panelPassword").slideDown("slow");
				document.getElementById("editPassword").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelPassword").slideUp("slow");
				document.getElementById("editPassword").innerHTML = "Edit";
			}
		});

		/* $("#editTimeOut").click(function() {
			var value = document.getElementById("editTimeOut").innerHTML;
			if (value == "Edit") {
				$("#panelTimeOut").slideDown("slow");
				document.getElementById("editTimeOut").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelTimeOut").slideUp("slow");
				document.getElementById("editTimeOut").innerHTML = "Edit";
			}
		}); */
	});
</script>
</html>
